<template>
    <div class="common-list">
        <slot name="message"></slot>
        <search-condition ref="seachCondition" @collapse="collapse" @resert="resert" v-if="formConfig.length" @search="search">
            <template v-for="item in formConfig.filter((item) => item.formType === 'slot')" #[item.slotName]>
                <slot :name="item.slotName"></slot>
            </template>
        </search-condition>
        <slot name="anotherBoard"></slot>
        <slot name="anotherStatistics"></slot>
        <div class="wrapper" :style="{ height: `calc(100% - ${seachConditionHeight}px)` }">
            <div class="wrapper-left">
                <list-title>
                    <template #btns>
                        <slot name="btns"></slot>
                    </template>
                </list-title>
                <w-table ref="tableRef" v-if="isShowTable" @rowClick="rowClick" @rowDblclick="rowDblclick">
                    <template #[item.slotName]="scope" v-for="item in tableConfig">
                        <slot :name="item.slotName" v-if="item.slotName" :scope="scope"></slot>
                    </template>
                </w-table>
            </div>
            <slot name="anotherWrapper"></slot>
        </div>
    </div>
</template>

<script setup>
import searchCondition from "./searchCondition.vue";
import listTitle from "./listTitle.vue";
import wTable from "./wTable.vue";
import { ref, onMounted, nextTick, inject, isRef } from "vue";
import emitter from "@/bus";
defineProps({
    isShowTable: {
        type: Boolean,
        default: true
    }
});
const emits = defineEmits(["resert", "search", "rowClick", "rowDblclick"]);
const seachCondition = ref(null);
const seachConditionHeight = ref(0);
const tableConfig = isRef(inject("tableConfig", [])) ? inject("tableConfig", []).value : inject("tableConfig", []);
const formConfig = isRef(inject("formConfig", {})) ? inject("formConfig", {}).value : inject("formConfig", {});
const tableRef = ref(null);
const collapse = (isCollapse) => {
    emitter.emit("collapse", isCollapse);
    nextTick(() => {
        seachConditionHeight.value = seachCondition.value.$el.clientHeight + 20;
    });
};
const resert = () => {
    emits("resert");
};
const search = () => {
    emits("search");
};
emitter.on("search", search);
const rowClick = (row, column, event) => {
    emits("rowClick", row, column, event);
};
const rowDblclick = (row, column, event) => {
    emits("rowDblclick", row, column, event);
};
onMounted(() => {
    seachConditionHeight.value = formConfig.length ? seachCondition.value.$el.clientHeight + 20 : 0;
});
defineExpose({
    tableRef
});
</script>

<style lang="less" scoped>
.common-list {
    height: 100%;
    .wrapper {
        box-sizing: border-box;
        padding: 0 20px;
        background-color: #fff;
        .wrapper-left {
            height: 100%;
        }
    }
}
</style>
